<template>
  <div>
    <div class="header">教师管理模块 >> 新增教师</div>
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16">
        <div class="form">
          <div class="title">新增教师（下列均为必填项）</div>
          教师姓名:
          <el-input
            class="input"
            v-model="teacherRef.nickName"
            placeholder="教师姓名"
          ></el-input>
          <br />
          <br />
          所属专业：
          <el-select
            v-model="teacherRef.major"
            placeholder="请选择教师所属专业"
          >
            <el-option
              v-for="(item, index) in majorOptions"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
          <br />
          <br />
          教师职称：
          <el-select
            v-model="teacherRef.profession"
            placeholder="请选择教师职称"
          >
            <el-option
              v-for="(item, index) in professionOptions"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
          <br />
          <br />
          <div class="tips">(在提交表单后系统自动分配账号、密码)</div>
          <br />
          <br />
          <div class="btn-container">
            <el-button
              type="primary"
              round
              class="btn"
              @click="addTeacher"
              :disabled="disabled"
            >
              确认新增
            </el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { User } from "@/datasource/Type";
import { useStore } from "vuex";
import { defineComponent, ref, watch } from "vue";
import { State } from "@/store";
import { ADD_TEACHER } from "@/store/VuexTypes";

export default defineComponent({
  setup() {
    const teacher: User = {
      nickName: "",
      profession: "",
      major: "",
    };
    const teacherRef = ref<User>(teacher);
    const disabled = ref(true);
    const store = useStore<State>();
    //const teacher_userName = computed(() => store.state.teacher_userName);
    //const teacher_password = computed(() => store.state.teacher_password);
    const majorOptions = ref([
      "计算机科学与技术",
      "软件工程",
      "信息管理与信息系统",
    ]);
    const professionOptions = ref(["教授", "副教授", "讲师"]);
    const addTeacher = () => {
      store.dispatch(ADD_TEACHER, {
        nickName: teacherRef.value.nickName,
        major: teacherRef.value.major,
        profession: teacherRef.value.profession,
      });
    };
    watch(teacherRef.value, () => {
      if (
        teacherRef.value.major &&
        teacherRef.value.nickName &&
        teacherRef.value.profession
      ) {
        if (
          teacherRef.value.major.length > 0 &&
          teacherRef.value.profession.length > 0 &&
          teacherRef.value.nickName.trim().length > 0
        ) {
          disabled.value = false;
        } else {
          disabled.value = true;
        }
      } else {
        disabled.value = true;
      }
    });
    return {
      teacherRef,
      professionOptions,
      majorOptions,
      addTeacher,
      disabled,
    };
  },
});
</script>

<style scoped>
.header {
  width: 90%;
  padding: 5px 5px 10px;
  border-bottom: 1px solid #ccc;
  font-size: 12px;
  color: grey;
  margin-bottom: 20px;
}
.title {
  margin: 10px auto 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
}
.form {
  padding: 50px 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.input {
  width: 300px;
}
.tips {
  color: #ccc;
  font-size: 14px;
}
.btn-container {
  display: flex;
  justify-content: center;
}
.btn {
  width: 200px;
}
</style>
